<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2024年咸鱼之王-端午鱼竿计算器</title>
    <link rel="stylesheet" href="./index.css" />
    <!--引入react核心库-->
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <!--引入react扩展库，用于支持react操作dom-->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <!--引入babel，用于将jsx转成js-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="./index.js"></script>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>
<script type="text/babel">
  
  const App = () => {
    const [level, setLevel] = React.useState(2);
    const [gold, setGold] = React.useState(500000);
    const [rod, setRod] = React.useState(1750);

    const changeLevel = (e) => {
      setLevel(e.target.value);
    };

    const changeGold = (e) => {
      setGold(e.target.value);
    };

    const changeRod = (e) => {
      setRod(e.target.value);
    };

    return (
      <div class="index">
        
        <div class="index-content">
          <div class="ipts">
            <label htmlFor="boxIpt">入场金砖 </label>
            推荐22w
          </div>
          
          <div class="ipts">
            <label htmlFor="boxIpt">黑市刷新次数</label>
            <select name="boxIpt" onChange={changeLevel}>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
          </div>
          <div class="score">
            <label htmlFor="target_gold">目标金砖</label>
            <select name="target_gold" onChange={changeGold}>
              <option value="500000">50w</option>
              <option value="460000">46w</option>
              <option value="420000">42w</option>
              <option value="380000">38w</option>
            </select>
          </div>
          <div class="score">
            <label htmlFor="target_rod">目标鱼竿</label>
            <select name="target_rod" onChange={changeRod}>
              <option value="1750">1750</option>
              <option value="1600">1600</option>
              <option value="1450">1450</option>
              <option value="1300">1300</option>
            </select>
          </div>
          <div class="rounds">
            <div class="title">最终鱼竿</div>
            <div class="rounds-num">
              {calcRods(rod - 0, level - 0, gold - 0).toFixed(0)}
            </div>
          </div>
        </div>
      </div>
    );
  };

  ReactDOM.render(<App />, document.getElementById("app"));
</script>
